<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../js/vue.js"></script>
  <script src="../js/vue-router-3.6.5.js"></script>
</head>
<body>
<!--初始化容器-->
<div id="app">
  <!-- 5. 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>


  <hr>
  <h2>使用超链接实现路由切换</h2>
  <p> <a href="#/login">登录</a></p>
  <p> <a href="#/register">注册</a></p>
  <hr>
  <h2>使用router-link实现路由切换  to="string"</h2>
   <!--   使用router-link 本质还是 a 超链接-->
  <p>
    <router-link to="/login">登录</router-link>
  </p>
  <p>
    <router-link to="/register">注册</router-link>
  </p>


  <hr>
  <h2>使用router-link实现路由切换  :to="{path}"</h2>
  <p>
    <router-link :to="{path:'/login'}">登录</router-link>
  </p>
  <p>
    <router-link :to="{path:'/register'}">注册</router-link>
  </p>

<!--
    使用path和name均可实现路由的切换  但是使用name切换路由时  可以实现解耦
-->
  <hr>
  <h2>使用router-link实现路由切换  :to="{name}"</h2>
  <p>
    <router-link :to="{name:'login'}">登录</router-link>
  </p>
  <p>
    <router-link :to="{name:'register'}">注册</router-link>
  </p>


  <hr>
  <h2>使用js代码实现路由切换</h2>
  <p>
    <button @click="login">登录</button>
  </p>
  <p>
    <button  @click="register">注册</button>
  </p>



</div>



<script>

  // 登录组件
  const  login = {

    template:`
        <div>
            <h2>欢迎登录</h2>
            <form action="#" method="get">
                <p><input type="text" placeholder="请输入用户名"></p>
                <p><input type="text" placeholder="请输入密码"></p>
                <p><input type="submit" value="登录"></p>
            </form>
        </div>
    `

  }

  // 注册组件
  const  register = {
    template:`
        <div>
            <h2>欢迎注册</h2>
            <form action="#" method="get">
                <p><input type="text" placeholder="请输入用户名"></p>
                <p><input type="text" placeholder="请输入密码"></p>
                <p><input type="submit" value="注册"></p>
            </form>
        </div>
    `
  }

  // 404组件
  const  fileNotFound = {
      template:`
          <h2>页面找不到</h2>
      `
  }

  // 2.定义路由  路由列表  定义路径和组件的对应关系
  const  routes = [
    {
      path:'/',
      redirect:'/login'   //  实现路由重定向
    },
    {
      path:'/login',     //  路径
      component: login,   // 组件
      name:"login"     //  命名路由
    },
    {
      path:'/register',
      component: register,
      name:"register"
    },
    {
      path:'/**',
      component: fileNotFound,
      name:"404"
    }
  ]

  // 3. 创建路由实例
  const  router =  new VueRouter({
    routes  // // (缩写) 相当于 routes: routes
  })


  // 4.创建和挂载根实例
  let vm = new Vue({
    el:'#app',
    data:{},
    methods:{
      login(){
            //  使用js实现路由切换   获取路由管理对象
           // this.$router.push("/login")
          // this.$router.push({path:'/login'})
          this.$router.push({name:'login'})
      },
      register(){
           this.$router.push("/register")
      }
    },
    components:{
      // login,
      // register
    },
    router
  })

</script>
</body>
</html>